* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
body {
  width: 100%;
  height: 100vh;
  background: url(../imgs/08.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
}
.header {
  position: relative;
  width: 1200px;
  height: 10%;
  margin: 0 auto;
  /* background: pink; */
  /* background: transparent; */
  /* opacity: .3; */
  margin-bottom: 3px;
  display: flex;
}
.header .hrader-left {
  position: absolute;
  width: 8%;
  height: 100%;
  /* border-radius: 50%; */
  /* overflow: hidden; */
}
.header .hrader-left .hrader-left-div {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  right: 30px;
  top: 25px;
  background-color: pink;
  text-align: center;
  line-height: 25px;
  transition: 1s;
  opacity: 0;
  transform-origin: -90px 270px;
}

.header .hrader-left:hover .chun {
  transform: translateX(-60px) translateY(-23px);
  opacity: 1;
}
.header .hrader-left:hover .xia {
  transform: translateX(49px) translateY(-23px);
  opacity: 1;
}
.header .hrader-left:hover .qiu {
  transform: translateX(-60px) translateY(23px);
  opacity: 1;
}
.header .hrader-left:hover .dong {
  transform: translateX(49px) translateY(23px);
  opacity: 1;
}

.header .hrader-left .hrader-left-img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.header .header-center {
  position: absolute;
  width: 60%;
  height: 100%;
  margin: 0 15%;
  /* background: red; */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 5px;
  /* overflow: hidden; */
}
.header .header-center .header-center-div {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.header .header-center .header-center-div > img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 1s;
}
.header .header-center .one a:nth-of-type(1) {
  position: absolute;
  display: block;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.8rem;
  z-index: -1;
  transition: 1s;
}
.header .header-center .header-center-div:hover a {
  z-index: 1;
}
.header .header-center .one:hover img {
  opacity: 0.4;
}
.header .header-right {
  position: absolute;
  width: 7%;
  height: 100%;
  /* background: #fff; */
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .header-right > main {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  /* border: solid 1px red; */
  transform-style: preserve-3d;
  /* transform: perspective(900px) rotateX(25deg); */
  animation: mo 5s linear infinite;
}
.header .header-right > main .min {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: blue;
}
.header .header-right > main .min img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 2s;
  opacity: 0.6;
}

.header .header-right > main .one {
  transform: translateZ(5px);
}
.header .header-right > main .two {
  transform: translateZ(-5px);
}
.header .header-right > main .three {
  transform: rotateY(90deg) translateZ(5px);
}
.header .header-right > main .four {
  transform: rotateY(90deg) translateZ(-5px);
}
.header .header-right > main .five {
  transform: rotateX(90deg) translateZ(5px);
}
.header .header-right > main .six {
  transform: rotateX(90deg) translateZ(-5px);
}
.header .header-right > main .max {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0.4;
  transition: 2s;
}
.header .header-right > main .max img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.header .header-right > main .seven {
  transform: translateZ(15px);
}
.header .header-right > main .eight {
  transform: translateZ(-15px);
}
.header .header-right > main .nine {
  transform: rotateY(90deg) translateZ(15px);
}
.header .header-right > main .ten {
  transform: rotateY(90deg) translateZ(-15px);
}
.header .header-right > main .eleven {
  transform: rotateX(90deg) translateZ(15px);
}
.header .header-right > main .twelve {
  transform: rotateX(90deg) translateZ(-15px);
}
.header .header-right:hover > main .seven {
  opacity: 1;
  transform: translateZ(25px);
}
.header .header-right:hover > main .eight {
  opacity: 1;
  transform: translateZ(-25px);
}
.header .header-right:hover > main .nine {
  opacity: 1;
  transform: rotateY(90deg) translateZ(25px);
}
.header .header-right:hover > main .ten {
  opacity: 1;
  transform: rotateY(90deg) translateZ(-25px);
}
.header .header-right:hover > main .eleven {
  opacity: 1;
  transform: rotateX(90deg) translateZ(25px);
}
.header .header-right:hover > main .twelve {
  opacity: 1;
  transform: rotateX(90deg) translateZ(-25px);
}
.header .header-right:hover > main .min {
  opacity: 1;
}

@keyframes mo {
  0% {
    transform: rotate3D(1, 1, 1, 0deg);
  }

  100% {
    transform: rotate3D(1, 1, 1, 360deg);
  }
}
